{% load i18n static tz %}
{% get_current_language as LANGUAGE_CODE %}
{% get_current_language_bidi as LANGUAGE_BIDI %}

<!DOCTYPE html>
<html lang="{{ LANGUAGE_CODE|default:"en-us" }}" {% if LANGUAGE_BIDI %}dir="rtl"{% endif %}>
    <head>
        <title>{% block title %}Home{% endblock %} | ArchiveBox</title>
        
        {% block blockbots %}
            <meta name="robots" content="NONE,NOARCHIVE">
        {% endblock %}
        
        <link rel="stylesheet" type="text/css" href="{% block stylesheet %}{% static "admin/css/base.css" %}{% endblock %}">
        {% block extrastyle %}
        <style>
            #upgrade-banner {
                position: fixed;
                right: 20px;
                bottom: 20px;
                background-color: #f8f8f8;
                color: #333333;
                border: 2px solid #772948;
                padding: 10px 20px;
                z-index: 1000;
                text-align: center;
            }
            #dismiss-btn {
                background: #aa1e55;
                color: white;
                cursor: pointer;
            }
        </style>
        {% endblock %}
        
        {% if LANGUAGE_BIDI %}
            <link rel="stylesheet" type="text/css" href="{% block stylesheet_rtl %}{% static "admin/css/rtl.css" %}{% endblock %}">
        {% endif %}
        
        {% block responsive %}
            <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
            <link rel="stylesheet" type="text/css" href="{% static "admin/css/responsive.css" %}">
            {% if LANGUAGE_BIDI %}
                <link rel="stylesheet" type="text/css" href="{% static "admin/css/responsive_rtl.css" %}">
            {% endif %}
        {% endblock %}
        
        <link rel="stylesheet" type="text/css" href="{% static "admin.css" %}">
        
        <script>
            function selectSnapshotListView(e) {
                e && e.stopPropagation()
                e && e.preventDefault()
                console.log('Switching to Snapshot list view...')
                localStorage.setItem('preferred_snapshot_view_mode', 'list')
                window.location = "{% url 'admin:core_snapshot_changelist' %}" + document.location.search
                return false
            }
            function selectSnapshotGridView(e) {
                e && e.stopPropagation()
                e && e.preventDefault()
                console.log('Switching to Snapshot grid view...')
                localStorage.setItem('preferred_snapshot_view_mode', 'grid')
                window.location = "{% url 'admin:grid' %}" + document.location.search
                return false
            }

            const preferred_view = localStorage.getItem('preferred_snapshot_view_mode') || 'unset'
            const current_view = (
                window.location.pathname === "{% url 'admin:core_snapshot_changelist' %}"
                    ? 'list'
                    : 'grid')
            console.log('Preferred snapshot view is:', preferred_view, 'Current view mode is:', current_view)
            
            if (preferred_view === 'grid' && current_view !== 'grid') {  
                selectSnapshotGridView()
            }
        </script>

        {% block extrahead %}{% endblock %}
    </head>


    <body class="{% if is_popup %}popup {% endif %}{% block bodyclass %}{% endblock %}" data-admin-utc-offset="{% now "Z" %}">
        {% include 'progressbar.html' %}

        <div id="container">
            {% if not is_popup %}
                <div id="header">
                    <div id="branding">
                        <h1 id="site-name">
                            <a href="{% url 'Home' %}">
                                <img src="{% static 'archive.png' %}" id="logo">
                                ArchiveBox
                            </a>
                        </h1>
                    </div>
                    {% block usertools %}
                        {% if has_permission %}
                            {% include 'navigation.html' %}
                        {% endif %}
                    {% endblock %}
                    {% block nav-global %}{% endblock %}
                </div>

                {% block breadcrumbs %}
                    <div class="breadcrumbs">
                        <a href="{% url 'admin:index' %}">{% trans 'Home' %}</a>
                        {% if title %} &rsaquo; {{ title }}{% endif %}
                    </div>
                {% endblock %}
            {% endif %}

            {% block messages %}
                {% if messages %}
                    <ul class="messagelist">
                        {% for message in messages %}
                            <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message|capfirst }}</li>
                        {% endfor %}
                    </ul>
                {% endif %}
            {% endblock messages %}

            <div id="content" class="{% block coltype %}colM{% endblock %}">
                {% if opts.model_name == 'snapshot' and cl %}
                    <small id="snapshot-view-mode">
                        <a href="#list" title="List view" id="snapshot-view-list">☰</a> | 
                        <a href="#grid" title="Grid view" id="snapshot-view-grid" style="letter-spacing: -.4em;">⣿⣿</a> 
                    </small>
                {% endif %}
                {% block pretitle %}{% endblock %}
                {% block content_title %}{# {% if title %}<h1>{{ title }}</h1>{% endif %} #}{% endblock %}
                {% block content %}
                    {% block object-tools %}{% endblock %}
                    {{ content }}
                {% endblock %}
                {% block sidebar %}{% endblock %}
                <br class="clear">
            </div>

            {% block footer %}<div id="footer"></div>{% endblock %}
        </div>

        {% if user.is_authenticated and user.is_superuser and CAN_UPGRADE %}
            <script>
                if (!localStorage.getItem("bannerDismissed")) {
                    const upgradeVersionTag = "{{VERSIONS_AVAILABLE.recommended_version.tag_name}}"
                    const upgradeVersionURL = "{{VERSIONS_AVAILABLE.recommended_version.html_url}}"
                    const currentVersionTag = "{{VERSION}}"
                    const currentVersionURL = "{{VERSIONS_AVAILABLE.recommended_version.html_url}}"

                    createBanner(currentVersionTag, currentVersionURL, upgradeVersionTag, upgradeVersionURL)
                }

                function createBanner(currentVersionTag, currentVersionURL, upgradeVersionTag, upgradeVersionURL) {
                    const banner = document.createElement('div')
                    banner.setAttribute('id', 'upgrade-banner');
                    banner.innerHTML = `
                        <p>There's a new version of ArchiveBox available!</p>
                        Your version: <a href=${currentVersionURL}>${currentVersionTag}</a> | New version: <a href=${upgradeVersionURL}>${upgradeVersionTag}</a>
                        <p>
                        <a href=https://github.com/ArchiveBox/ArchiveBox/wiki/Upgrading-or-Merging-Archives>Upgrade Instructions</a> | <a href=https://github.com/ArchiveBox/ArchiveBox/releases>Changelog</a> | <a href=https://github.com/ArchiveBox/ArchiveBox/wiki/Roadmap>Roadmap</a> 
                        </p>
                        <button id="dismiss-btn">Dismiss</button>
                    `
                    document.body.appendChild(banner);
                    const dismissButton = document.querySelector("#dismiss-btn")
                    if (dismissButton) {
                        dismissButton.addEventListener("click", dismissBanner)
                    }
                }

                function dismissBanner() {
                    const banner = document.getElementById("upgrade-banner")
                    banner.style.display = "none"
                    localStorage.setItem("bannerDismissed", "true")
                }
            </script>
        {% endif %}
        
        <script>
            $ = django.jQuery;
            $.fn.reverse = [].reverse;

            // hide images that fail to load
            document.querySelector('body').addEventListener('error', function (e) {
                e.target.style.opacity = 0;
            }, true)

            // setup timezone
            {% get_current_timezone as TIME_ZONE %}
            window.TIME_ZONE = '{{TIME_ZONE}}'

            window.setCookie = function(name, value, days) {
                let expires = ""
                if (days) {
                    const date = new Date()
                    date.setTime(date.getTime() + (days*24*60*60*1000))
                    expires = "; expires=" + date.toUTCString()
                }
                document.cookie = name + "=" + (value || "")  + expires + "; path=/"
            }

            function setTimeOffset() {
                if (window.GMT_OFFSET) return
                window.GMT_OFFSET = -(new Date).getTimezoneOffset()
                window.setCookie('GMT_OFFSET', window.GMT_OFFSET, 365)
            }

            // change the admin actions button from a dropdown to buttons across
            function fix_actions() {
                const container = $('div.actions')

                // too many actions to turn into buttons
                if (container.find('select[name=action] option').length >= 11) return

                // hide the empty default option thats just a placeholder with no value
                container.find('label:nth-child(1), button[value=0]').hide()

                const buttons = $('<div></div>')
                    .insertAfter('div.actions button[type=submit]')
                    .css('display', 'inline')
                    .addClass('class', 'action-buttons');

                // for each action in the dropdown, turn it into a button instead
                container.find('select[name=action] option:gt(0)').each(function () {
                    const action_type = this.value
                    $('<button>')
                        .attr('type', 'button')
                        .attr('name', action_type)
                        .addClass('button')
                        .text(this.text)
                        .click(function (e) {
                            e.preventDefault()
                            e.stopPropagation()

                            const num_selected = document.querySelector('.action-counter').innerText.split(' ')[0]

                            if (action_type === 'overwrite_snapshots') {
                                const message = (
                                    'Are you sure you want to re-archive (overwrite) ' + num_selected + ' Snapshots?\n\n' +
                                    'This will delete all previously saved files from these Snapshots and re-archive them from scratch.\n\n'
                                )
                                if (!window.confirm(message)) return false
                            }
                            if (action_type === 'delete_snapshots') {
                                const message = (
                                    'Are you sure you want to permanently delete ' + num_selected + ' Snapshots?\n\n' +
                                    'They will be removed from your index, and all their Snapshot content on disk will be permanently deleted.'
                                )
                                if (!window.confirm(message)) return false
                            }

                            // select the action button from the dropdown
                            container.find('select[name=action]')
                                .find('[selected]').removeAttr('selected').end()
                                .find('[value=' + action_type + ']').attr('selected', 'selected').click()
                            
                            // click submit & replace the archivebox logo with a spinner
                            $('#changelist-form button[name="index"]').click()
                            document.querySelector('#logo').outerHTML = '<div class="loader"></div>'
                            return false
                        })
                        .appendTo(buttons)
                })
                console.log('Converted', buttons.children().length, 'admin actions from dropdown to buttons')
            }
            
            function setupSnapshotGridListToggle() {
                $("#snapshot-view-list").click(selectSnapshotListView)
                $("#snapshot-view-grid").click(selectSnapshotGridView)

                $('#changelist-form .card input:checkbox').change(function() {
                    if ($(this).is(':checked'))
                        $(this).parents('.card').addClass('selected-card')
                    else 
                        $(this).parents('.card').removeClass('selected-card')
                })
            };
            $(document).ready(function() {
                fix_actions()
                setupSnapshotGridListToggle()
                setTimeOffset()
            })
        </script>
    </body>
</html>
